<template>
	<popup direction="bottom" v-model="show">
		<view class="commonPopup flex" v-if="info" :style="{ '--fss': app.theme.fss() }">
			<view class="transverse-line flex">
				<view class="transverse-line-view"></view>
			</view>
			<view class="block_more flex" v-for="(item, index) in info.blockList">
				<view class="item flex" v-for="(prop, i) in item" @tap="info.itemTap(prop)">
					<view class="ell text" :style="{ color: prop.color || 'rgba(255,255,255,0.75)' }">{{ prop.name }}</view>
					<image :src="prop.icon" class="icon" mode="aspectFill"></image>
				</view>
			</view>
			<view class="bottomPlace"></view>
			<footer-bar v-if="footBar"></footer-bar>
		</view>
	</popup>
</template>

<script setup>
	import { ref, inject, defineProps, defineExpose } from "vue";
	const app = inject('app');
	
	/* props父组件传参区域 */
	// 接受props
	const prop = defineProps({
		
		// 是否具有底部的foot占位
		footBar: {
			type: Boolean,
			default: true
		},
		
	});
	
	
	/* 变量区域 */
	// 显示状态
	const show = ref(false);
	
	// 基本数据
	const info = ref(null);

	
	/* 方法区域 */
	// 打开弹窗
	function open(e) {
		if(!e.itemTap){
			e.itemTap = function(item){}
		}
		
		info.value = e;
		show.value = true;
	}
	
	// 关闭弹窗
	function close() {
		show.value = false;
	}
	
	
	// 将方法抛出给父级组件使用
	defineExpose({ open, close });
</script>

<style scoped lang="scss">
	.commonPopup{
		border-radius: 15rpx 15rpx 0 0;
		overflow: hidden;
		flex-direction: column;
		width: 100vw;
		padding-bottom: $padding;
		background: linear-gradient(#232526, #202122);
		.block_more {
			margin: 15rpx $padding 0 $padding;
			flex-direction: column;
			border-radius: 10rpx;
			overflow: hidden;
			background: rgba(255,255,255,0.06);
			.item {
				width: 100%;
				flex-direction: row;
				align-items: center;
				line-height: 96rpx;
				padding: 0 40rpx;
				position: relative;
				transition: 0.2s all;
				&:active {
					background: rgba(255,255,255,0.03);
				}
				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 40rpx;
					right: 40rpx;
					height: 2rpx;
					background: rgba(255,255,255,0.01)
				}
				&:nth-last-child(1) {
					&:after {
						display: none;
					}
				}
				.text {
					font-size: calc(27rpx * var(--fss));
					flex: 1;
					margin-right: 22rpx;
					width: 0;
				}
				.icon{
					width: 33rpx;
					height: 33rpx;
				}
			}
		}
		/* #ifdef APP */
		.bottomPlace{
			height: var(--window-bottom);
		}
		/* #endif */
	}
</style>